<template>
  <div class="main">
    <govheader title="化工产业大脑 · 园区总览" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" style="margin: 0;position: relative;" :gutter="10" v-if="zfNameflag">
      <div class="content-left" style="position: absolute;width:60%;z-index:100;margin-left:10px">
        <el-col class="box">
          <div class="content-body card">
            <div>
                <div>化工园区</div>
                <div>{{parkCount}}</div>
            </div>
            <div>
                <div>国家级<br/>园区</div>
                <div>{{nationalParkCount}}</div>
            </div>
            <div>
                <div>全国三十强<br/>园区</div>
                <div>{{nationalTopThirtyParkCount}}</div>
            </div>
            <div>
                <div>全国潜力十强<br/>园区</div>
                <div>{{nationalPotentialTopThenParkCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">浙江省化工园区排名</div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
              >
                营收
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
                style="border-left: 1px solid #7db2d0"
              >
                税收
              </div>
              <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
                style="border-left: 1px solid #7db2d0"
              >
                亩均税收
              </div>
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
                style="border-left: 1px solid #7db2d0"
              >
                园区指数
              </div>
              <div style="color: #697c9b" @click="showParkRank()">
                查看全国园区排名>
              </div>
            </div>
            <div id="tableColor">
              <el-table
              ref="table"
                :data="tableData"
                style="width: 100%"
                height="505"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '12px 0' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  header-align="center"
                  align="center"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="parkName"
                  :show-overflow-tooltip="true"
                  label="园区名称"
                >
                  <template scope="scope">
                    <span
                      style="
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;
                        color: #1492ff;
                      "
                      @click="toDetail(scope.row)"
                      >{{ scope.row.parkName }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="showInfo"
                  :show-overflow-tooltip="true"
                  :label="showInfo"
                ></el-table-column>
                <el-table-column
                  property="entCount"
                  :show-overflow-tooltip="true"
                  label="企业数"
                ></el-table-column>
                <el-table-column
                  property="parkArea"
                  :show-overflow-tooltip="true"
                  label="占地面积(亩)"
                ></el-table-column>
                <el-table-column
                  property="cityName"
                  :show-overflow-tooltip="true"
                  label="所在地区"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </div>
      <div
        class="content-center"
        style="background-color: (255, 255, 255, 0.5);position: absolute;right:0;width:50%;margin-right:10px"
      >
        <div id="map" style="width: 100%; height: 775px"></div>
      </div>
    </el-row>
    <el-dialog :visible.sync="moreShow" class="content-body" width="60%">
      <div class="tabs">
        <div
          :class="active1 === 0 ? 'selectActive' : ''"
          @click="active1Click(0)"
        >
          全国三十强
        </div>
        <div
          :class="active1 === 1 ? 'selectActive' : ''"
          @click="active1Click(1)"
          style="border-left: 1px solid #7db2d0"
        >
          全国潜力十强
        </div>
        <div></div>
      </div>
      <div id="tableColor1">
        <el-table
        ref="table1"
          :data="showTableData"
          style="width: 100%"
          height="450"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            :property="active1 === 0?'nationalParkTopThirty':'nationalPotentialParkTopTen'"
            header-align="center"
            align="center"
            label="排名"
          ></el-table-column>
          <el-table-column
            property="parkName"
            :show-overflow-tooltip="true"
            label="园区名称">
            </el-table-column>
            <el-table-column
              property="provinceName"
              header-align="center"
              align="center"
              label="所在省份"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const echarts = require("echarts");
import dd from 'gdt-jsapi'
import govheader from "@/components/govheader";
import govnavigation from '@/components/govnavigation'
export default {
  name: "zfParkOverview",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      year: "",
      center: {},
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      topTenData: [],
      topThirtyData: [],
      showTableData: [],
      active: 1,
      active1: 0,
      showInfo: "营收(亿元)",
      moreShow: false,
      myChart1: "",
      option1: "",
      parkCount: "",
      nationalParkCount: "",
      nationalTopThirtyParkCount: "",
      nationalPotentialTopThenParkCount: "",
    };
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted() {
    if (this.zfNameflag) {
      this.year = new Date().getFullYear();
      this.$http
        .post(`/home/government/govParkOverview/getParkOverview`, {
          searchYear: this.year,
        })
        .then(({ data: res }) => {
          this.parkCount = res.data.parkInfoCount.parkCount;
          this.nationalParkCount = res.data.parkInfoCount.nationalParkCount;
          this.nationalTopThirtyParkCount =
            res.data.parkInfoCount.nationalTopThirtyParkCount;
          this.nationalPotentialTopThenParkCount =
            res.data.parkInfoCount.nationalPotentialTopThenParkCount;
          this.tableData1 = res.data.parkIndexList;
          this.tableData2 = res.data.incomeList;
          this.tableData3 = res.data.taxList;
          this.tableData4 = res.data.perMuTaxList;
          this.tableData = this.tableData2;
          res.data.incomeList.forEach(item =>{
            this.center[item.parkAbbreviation] = [item.longitude,item.latitude,item.parkAddr,item.standEntCount,item.showInfo]
          });
          this.renderMyChart();
        })
        .catch(() => {});
      this.getright_table();
    }
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getright_table() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table1() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId1 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    activeClick(val) {
      let _this = this;
      this.active = val;
      if (val === 0) {
        this.showInfo = "园区指数";
      } else if (val === 1) {
        this.showInfo = "营收(亿元)";
      } else if (val === 2) {
        this.showInfo = "税收(亿元)";
      } else if (val === 3) {
        this.showInfo = "亩均税收(万元)";
      }
      let tableData = "tableData" + (val + 1);
      this.tableData = this[tableData];
      clearInterval(_this.intervalId);
      this.$refs.table.bodyWrapper.scrollTop = 0;
      this.getright_table();
    },
    active1Click(val) {
      let _this = this;
      this.active1 = val;
      if (val === 0) {
        this.showTableData = this.topThirtyData;
      } else if (val === 1) {
        this.showTableData = this.topTenData;
      }
      clearInterval(_this.intervalId1);
      this.$refs.table1.bodyWrapper.scrollTop = 0;
      this.getright_table1();
    },
    toDetail(val) {
      console.log(val);
      this.$router.push({
        name: "zfParkOverviewDetail",
        query: {
          parkCode: val.parkCode,
          parkName: val.parkName,
          longitude: val.longitude,
          latitude: val.latitude,
          year: this.year,
        },
      });
    },
    showParkRank() {
      this.moreShow = true;
      this.$http
        .post(`/home/government/govParkOverview/getAllParkRank`, {
          searchYear: this.year,
        })
        .then(({ data: res }) => {
          this.topTenData = res.data.topTen;
          this.topThirtyData = res.data.topThirty;
          this.showTableData = this.topThirtyData;
          this.getright_table1();
        })
        .catch(() => {});
    },
    renderMyChart() {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById("map"));
      let uploadedDataURL = require("./zhejiang.json");
      let scatterData1 = [];
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item));
      }
      echarts.registerMap("js", uploadedDataURL);
      this.option2 = {
        title: {
          text: "浙江省化工园区分布",
          top: "10px",
          right: '10px',
          textStyle: {
            width: "100%",
            color: "#1c4ca1",
          },
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9999',
          // backgroundColor:'rgba(19, 130, 221,0.6)',
          backgroundColor: null,
          borderColor: '#333',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color:'#ffffff'
          },
          formatter: function (para) {
            console.log(para);
            if (para.seriesType === 'effectScatter') {
              return '<div style="text-align: left;font-size:12px;color:#ffffff;width:200px;overflow:hidden;white-space: pre-wrap;border-top:2px solid #02D9FD;border-bottom:2px solid #02D9FD;background: linear-gradient(90deg,rgba(0,93,220,.1) 0%, rgba(0,93,220,.8) 50%, rgba(0,93,220,.1) 100%);border-image: linear-gradient(90deg,rgba(7,216,247,0) 0%,rgba(7,216,247,.8) 50%, rgba(7,216,247,0) 100%) 2 2 2 2">'
                      +'<div style="text-align: center;font-size:16px;font-weight:600;color:#02D9FD;">'+ para.data[5] + '</div>'
                      +'<div>规上企业数: '+ para.data[3] + '</div>'
                      //  + '<div>主要产业: '+ para.data[5] + '</div>'
                        + '<div>上年度产业营收: '+ para.data[4] + '(亿元)</div>'
                         + '<div>园区地址: '+ para.data[2] + '</div>'
                      +'</div>'
            } else {
              return ''
            }
          }
        },
        geo: [
          {
            map: "js",
            aspectScale: .9,
            roam: true, // 是否允许缩放
            layoutSize: "100%",
            layoutCenter: ["62%", "50%"],
            zoom: .85,
            itemStyle: {
              areaColor: "rgba(156, 216, 255, 0.7)",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(156, 216, 255, 0.7)",
              },
              label: {
                show: true,
                color: "#FFFFFF",
              },
            },
            label: {
              show: true,
              color: "#333333",
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            itemStyle: {
              normal: {
                color: "rgb(0, 141, 221)",
              },
            },
            label: {
              // normal: {
                formatter: function (para) {
                  return ''
                },
//                 position: "right",
//                 color: "#333333",
//                 borderColor: '#005DDC',
//                 borderWidth: 1,
//                 borderType: 'solid',
//                 padding: 5,
//                 backgroundColor: 'rgba(255, 255, 255, 1)',
//                 show: false,
              // },
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            symbol: "circle",
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10,
          },
        ],
      };
      this.myChart2.setOption(this.option2);
      this.mapAutoPlay(_this.myChart2, _this.option2, 'startCharts2')
    },
    mapAutoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === 'series') {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      //高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });

      timer = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000);
          flag = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
  height: 860px;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
  color: rgb(115, 188, 235);
  background-image: url("../../../assets/img/zf/top_bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
  font-size: 16px;
}
.content {
  padding: 10px auto 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
    margin-top: 10px;
  }
  .content-body-right {
    width: 55%;
  }
}
.card {
  overflow: hidden;
  > div {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
    width: 23%;
    float: left;
    margin: 0 1%;
    height: 140px;
    padding: 25px;
    color: #ffffff;
    font-size: 20px;
    line-height: 25px;
    overflow: hidden;
    > div:last-child {
      text-align: center;
      font-size: 40px;
      position: absolute;
      top: 55px;
      right: 30px;
    }
  }
  > div:first-child {
    background-image: url("../../../assets/img/zf/6.png");
  }
  > div:nth-child(2) {
    background-image: url("../../../assets/img/zf/7.png");
  }
  > div:nth-child(3) {
    background-image: url("../../../assets/img/zf/8.png");
  }
  > div:last-child {
    background-image: url("../../../assets/img/zf/9.png");
  }
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
  > div:last-child {
    float: right;
    color: #000000;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>
